<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 添加ref表示 -->
      <h1 ref="title">{{num}}</h1>
      <button @click="num++,tip()">按钮</button>
    </div>
    <!-- 
      元素偏移量 宽高占位 scrollTop 视频音频的play pause 特有方法
      使用之前的老插件 swiper
     -->
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          num: 100,
        };
      },
      mounted() {
        // 访问DOM
        console.log(this.$refs.title);
      },
      methods: {
        async tip() {
          // console.log(this.$refs.title.innerHTML);//老DOM
          // DOM更新完毕的回调
          // this.$nextTick(() => {
          //   console.log(this.$refs.title.innerHTML);
          // });
          await this.$nextTick();
          console.log(this.$refs.title.innerHTML);
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
